<!--Generate by Kevin's CodeBuilder 2021-09-12 16:09:23 -->
<!--请注意！这里是页面片段，定义的标签ID，js变量不要与index.html列表页面重复-->
<!--如果是较复杂的页面，可以修改window的数据类型(dataType: iframe),然后将form.html改为完整的页面,实现iframe隔离，需要修改curdObj的访问方式为parent.curdObj-->
<div id="form_container" class="form_container">
    <!--利用隐藏的id标签区分是新增/编辑-->
    <input type="hidden" id="id" name="id" th:value="*{id}"/>
    <input type="hidden" id="old_roleName" name="old_roleName" value=""/>
    <table class="k_form_table">
    				<tr>
					<td class="label label30">[(${Lang.role_roleName})]</td>
					<td><input id="roleName" name="roleName" class="form_input form_input50 k_box_size" type="text"/></td>
				</tr>
				<tr>
					<td class="label label30">[(${Lang.role_roleStatus})]</td>
					<td>
						<label class="k_radio_label k_radio_anim">
							<input type="radio" name="roleStatus" value="1" checked="checked" />
							<i class="k_radio_i"></i>正常
						</label>
						<label class="k_radio_label k_radio_anim">
							<input type="radio" name="roleStatus" value="0"/>
							<i class="k_radio_i"></i>禁用
						</label>
					</td>
				</tr>
				<tr>
					<td class="label label30">[(${Lang.role_defaultRole})]</td>
					<td>
						<label class="k_radio_label k_radio_anim">
							<input type="radio" name="defaultRole" value="1"  />
							<i class="k_radio_i"></i>[(${Lang.common_yes})]
						</label>
						<label class="k_radio_label k_radio_anim">
							<input type="radio" name="defaultRole" value="0" checked="checked"/>
							<i class="k_radio_i"></i>[(${Lang.common_no})]
						</label>
					</td>
				</tr>
        <tr>
            <td class="button_td" colspan="2" style="padding-top:15px">
                <button id="button_submit" class="k_common_button"><i class="fa fa-floppy"></i> <span>[(${Lang.common_save})]</span></button>
                <button id="button_goback" class="k_common_button"><i class="fa fa-reply-all"></i><span>[(${Lang.common_goback})]</span></button>
            </td>
        </tr>
    </table>
</div>
<script type="application/javascript" th:src="@{/static/lib/vue.min.js}"></script>
<script type="application/javascript" th:inline="javascript">

    $B.DomUtils.onDomLoaded(function () {
        var vueForm,
            entityJson = [(${entityJson})],
            $form = document.getElementById("form_container"),
            idValue = document.getElementById("id").value;  //用于区分新增,编辑

        /***定义验证字段 ，配置监听回调等***/
        var formOpt = {
            verifyOnChange: true,
            verify: {
				roleName:['require','chchar']
            }
        };

        /**自定义控件配置,请参考Bui表单控件***/
        var diyCtls = {} ;
        vueForm = $B.vueForm( $form,entityJson,diyCtls,formOpt);

        /***当窗口关闭时候，销毁vueForm**/
        curdObj.setVueForm(vueForm);

        /**绑定事件**/
        $B.DomUtils.click(document.getElementById("button_goback"), function () {
            curdObj.closeWindow();
        });
        $B.DomUtils.click(document.getElementById("button_submit"), function () {
            if(vueForm.toVerify()){
                var prs = vueForm.toJSON();
                if(idValue === ""){
                    curdObj.add(prs,this);
                }else{
                    curdObj.update(prs,this);
                }
            }else{
            	let opt = {
            		timeout:1.5,
					mask:false,
					position:'top',
					content:"[(${Lang.common_verify_err})]"
				};
                $B.error(opt);
            }
        });
    });
</script>
